<template>
  <div class="virtual-scroll-table" :style="{ width: width }">
    <!-- 表头 -->
    <div class="table-header" :style="{ borderBottom: '1px solid #e5e7eb' }">
      <div class="table-header-row">
        <template v-for="(column, index) in columns" :key="index">
          <div
            class="table-header-cell"
            :style="{
              width: column.width || 'auto',
              minWidth: column.minWidth || '80px',
              padding: '12px 16px',
              borderRight: index < columns.length - 1 ? '1px solid #e5e7eb' : 'none',
            }"
          >
            {{ column.label || column.prop }}
          </div>
        </template>
      </div>
    </div>

    <!-- 虚拟滚动表格内容 -->
    <RecycleScroller
      class="table-body"
      :items="data"
      :item-size="rowHeight"
      :style="{ height: height }"
    >
      <template #default="{ item, index }">
        <div
          class="table-row"
          :style="{
            borderBottom: '1px solid #e5e7eb',
            backgroundColor: index % 2 === 0 ? '#fff' : '#fafafa',
          }"
        >
          <template v-for="(column, colIndex) in columns" :key="colIndex">
            <div
              class="table-cell"
              :style="{
                width: column.width || 'auto',
                minWidth: column.minWidth || '80px',
                padding: '12px 16px',
                borderRight: colIndex < columns.length - 1 ? '1px solid #e5e7eb' : 'none',
              }"
            >
              <!-- 支持自定义渲染函数 -->
              <template v-if="column.render">
                <component :is="column.render(item, index)" />
              </template>
              <!-- 普通文本渲染 -->
              <template v-else>
                {{ getCellValue(item, column) }}
              </template>
            </div>
          </template>
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script setup lang="ts">
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { computed } from 'vue'

// 定义列结构接口，兼容Element Plus Table的columns格式
interface TableColumn {
  prop?: string
  label?: string
  width?: string | number
  minWidth?: string | number
  render?: (row: any, index: number) => any
  [key: string]: any
}

// 组件属性
const props = defineProps<{
  columns: TableColumn[]
  data: any[]
  height?: string
  width?: string
  rowHeight?: number
}>()

// 默认属性
const defaultProps = {
  height: '400px',
  width: '100%',
  rowHeight: 50,
}

// 获取单元格值
const getCellValue = (row: any, column: TableColumn) => {
  if (!column.prop) return ''

  // 支持嵌套属性，如 'user.name'
  return column.prop.split('.').reduce((obj, prop) => {
    return obj ? obj[prop] : ''
  }, row)
}
</script>

<style scoped>
.virtual-scroll-table {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.table-header-row,
.table-row {
  display: flex;
  width: 100%;
}

.table-header-cell {
  font-weight: 500;
  color: #333;
  background-color: #f5f7fa;
  text-align: left;
  white-space: nowrap;
}

.table-cell {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-body {
  overflow: auto;
}

/* 修复虚拟滚动容器样式 */
.table-body >>> .vue-recycle-scroller {
  position: relative;
}

.table-body >>> .vue-recycle-scroller__slot {
  display: flex;
  flex-direction: column;
}
</style>
